<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    <el-breadcrumb-item>用户列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-table :data="resultData" style="width: 100%">
    <el-table-column prop="nickname" label="昵称" />
    <el-table-column prop="tel" label="手机号" />
    <el-table-column label="创建时间">
      <template #default="scope">
        <span>{{ timestampToTime(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    @current-change="currentChange"
  />
</template>

<script lang="ts" setup>
import { onMounted, ref, computed } from "vue";
import { getUserApi } from "@/api/user";
import timestampToTime from "@/utils/formatTime";

const tableData = ref([]);
const total = ref(0);
const page = ref(1);
const size = ref(10);

onMounted(async () => {
  const res = await getUserApi();
  if (res) {
    // console.log(res);
    tableData.value = res.data;
    total.value = res.data.length;
  }
});

const resultData = computed(() => {
  return tableData.value.slice(
    (page.value - 1) * size.value,
    page.value * size.value
  );
});

const currentChange = (n: number) => {
  page.value = n;
};
</script>
